<template>
  <div class="my-money">
      <tem-header :title="'我的资金'"></tem-header>
      <div class="body">
          <div class="money bg">
              <div class="input flex-boxs"><span>金额:</span><input type="number" v-model="money" number /></div>
          </div>
          <div class="btn-box pa bg">
              <input type="button" v-show="showBtn" class="bm-btn-5 normal" value="确定" @click="setmoney" />
              <p v-show="!showBtn">{{ setmoneyMeg }}</p>
          </div>
          <p class="explain pa">
              在这里你可以重新正确校正你当前拥有的资金,
              之后的每一笔收支记录都会在这个金额基础上体现,
              让你更直观的更方便的了解你当前余额!
          </p>
      </div>
  </div>
</template>

<script>
import { apiMyMoney } from '@http'
import header from '@components/header'
export default {
    data () {
        return {
            money: 0,
            showBtn: true,
            setmoneyMeg: null,
            setmoneyTimer: null,
        }
    },
    components: {
        'tem-header': header
    },
    created () {
        this.getmymoney()
    },
    methods: {
        getmymoney () {
            apiMyMoney ({operation: 'get'})
                .then((response) => {
                    if (response.data.status) {
                        this.money = response.data.data
                    }
                })
        },
        setmoney () {
            this.showBtn = false
            this.setmoneyMeg = '正在设置资金...'
            apiMyMoney ({operation: 'set', money: this.money})
                .then((response) => {
                    this.setmoneyMeg = response.data.message
                    clearTimeout(this.setmoneyTimer)
                    this.setmoneyTimer = setTimeout(() => {
                        this.showBtn = true
                    }, 3000)
                })
        }
    }
}
</script>

<style lang="less">
@import '../assets/style/base/b-gether-var.less';
.my-money{
    .money{margin-top:@10px; padding:@15px;
        span{flex:0 0 @50px; line-height:@40px; font-size:@14px; font-weight:bold;}
        input{font-size:@14px; font-weight:bold; color:@colorB-01; border:none;}
    }
    .btn-box{padding-bottom:@20px;
        input{width:100%;}
        p{height:@42px; line-height:@42px; text-align:center;}
    }
    .explain{padding:@40px @15px; text-align:letf; line-height:@30px; color:@grey-01;}
}
</style>
